<script lang="ts" setup>
import { computed } from 'vue';

interface Props {
	size?: string | number;
	lineHeight?: string | number;
	bold?: boolean;
	color?: string;
	align?: string;
	lineThrough?: boolean;
	ellipsis?: boolean;
}

const props = withDefaults(defineProps<Props>(), {});

const classNames = computed(() => {
	const list = ['x-text'];
	if (props.ellipsis) {
		list.push('x-text-ellipsis');
	}
	return list;
});

const style = computed(() => {
	const map: any = {};
	if (props.size) {
		map.fontSize = typeof props.size === 'number' ? props.size + 'rpx' : props.size;
		map.lineHeight = map.fontSize;
	}
	if (props.lineHeight) {
		map.lineHeight = typeof props.lineHeight === 'number' ? props.lineHeight + 'rpx' : props.lineHeight;
	}
	if (props.bold) {
		map.fontWeight = 'bold';
	}
	if (props.color) {
		map.color = props.color;
	}
	if (props.align) {
		map.textAlign = props.align;
	}
	if (props.lineThrough) {
		map.textDecoration = 'line-through';
	}
	return map;
});
</script>

<template>
	<view :class="classNames" :style="style">
		<slot></slot>
	</view>
</template>

<style lang="scss" scoped>
.x-text {
	display: inline-block;

	&-ellipsis {
		width: 100%;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
</style>
